<template>
  <el-col :span="20" style="height: 93vh; overflow-y: scroll; padding: 1vh">
    <el-row :gutter="10">
      <el-col :span="20" style="display: flex">
        <h2>用户分析</h2>
<!--        <el-select v-model="value" placeholder="请选择" size="small">-->
<!--          <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
      </el-col>
      <el-col :span="16">
        <div id="mapChart" style="height: 79vh"></div>
      </el-col>
      <el-col :span="8">
        <div id="barChart" style="height: 39vh"></div>
      </el-col>
      <el-col :span="8">
        <div id="lineChart" style="height: 39vh"></div>
      </el-col>
      <el-col :span="14">
        <div id="treeChart" style="height: 50vh"></div>
      </el-col>
      <el-col :span="10">
        <div id="wordChart" style="height: 50vh"></div>
      </el-col>
      <el-col :span="24">
        <div id="bubbleChart" style="height: 70vh"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="20" style="display: flex">
        <h2>时序分析</h2>
      </el-col>
      <el-col :span="24">
        <div id="bigChart" style="height: 50vh"></div>
      </el-col>
    </el-row>


    <!--    <div id="scatterChart" style="width: 900px; height: 500px"></div>-->
    <!--    <div id="radarChart" style="width: 900px; height: 500px"></div>-->
  </el-col>
</template>

<script>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min.js";
import gx from '@/assets/gx.json';
import china from '@/assets/china.json';

export default {
  name: "analysisVue",
  data() {
    return {
      theme: 'purple',
      value: ''
    }
  },
  mounted() {
    this.drawMap()
    this.drawTree()
    this.drawBar();
    this.drawLine();
    this.drawBig()
    this.wordCloud()
    this.drawBubble()
    // this.drawScatter();
  },
  methods: {
    drawMap() {
      let myChart = this.$echarts.init(document.getElementById('mapChart'))
      this.$echarts.registerMap("map", china, {});
      myChart.setOption({
        // title: {
        //   text: '地区房源分布情况',
        //   textStyle: {
        //     color: "#fefefe"
        //   },
        //   top: '3%',
        //   left: '3%',
        // },
        backgroundColor: 'rgba(41,52,65,0.88)',
        tooltip: {
          trigger: 'item',
          show: true
        },
        visualMap: {
          min: 200,
          max: 4070,
          realtime: false,
          calculable: false,
          show: true,
          inRange: {
            color: [
              'rgba(249,251,249,0.2)', 'rgba(27,234,218,0.9)'
            ]
          }
        },
        series: [{
          itemStyle: {
            normal: {
              label: {
                show: true,
                textStyle: {
                  color: "#f3f0f1"
                }
              },
              areaColor: 'rgba(128, 128, 128, 0)', //rgba设置透明度0
              borderColor: '#007bf1',//省份边框颜色
              borderWidth: 1.5,//省份边框
            },
            emphasis: {//鼠标hover样式
              label: {
                show: true,
                textStyle: {
                  color: '#fa4f04'
                }
              }
            }
          },
          type: "map",
          mapType: "map", // 自定义扩展图表类型
          zoom: 1.2,
          name: '房源数',
          roam: true,
          showLegendSymbol: false,
          label: {
            normal: {
              show: true, //关闭省份名展示
            },
            emphasis: {
              show: false
            },
            // show: true,
          },
          data: [{'name': '北京市', 'value': 636},
            {'name': '广东省', 'value': 3193},
            {'name': '上海市', 'value': 1039},
            {'name': '浙江省', 'value': 1567},
            {'name': '湖北省', 'value': 3571},
            {'name': '江苏省', 'value': 2955},
            {'name': '山东省', 'value': 3377},
            {'name': '四川省', 'value': 718},
            {'name': '河南省', 'value': 1866},
            {'name': '辽宁省', 'value': 1843},
            {'name': '福建省', 'value': 2922},
            {'name': '黑龙江省', 'value': 798},
            {'name': '陕西省', 'value': 1588},
            {'name': '湖南省', 'value': 3366},
            {'name': '河北省', 'value': 3353},
            {'name': '重庆市', 'value': 458},
            {'name': '安徽省', 'value': 2322},
            {'name': '广西壮族自治区', 'value': 2433},
            {'name': '云南省', 'value': 2191},
            {'name': '江西省', 'value': 3273},
            {'name': '天津市', 'value': 3212},
            {'name': '山西省', 'value': 2774},
            {'name': '海南省', 'value': 3095},
            {'name': '吉林省', 'value': 2161},
            {'name': '贵州省', 'value': 2781},
            {'name': '香港特别行政区', 'value': 2275},
            {'name': '甘肃省', 'value': 1496},
            {'name': '新疆维吾尔自治区', 'value': 688},
            {'name': '内蒙古自治区', 'value': 1531},
            {'name': '西藏自治区', 'value': 1002},
            {'name': '宁夏回族自治区', 'value': 2795},
            {'name': '台湾省', 'value': 3957},
            {'name': '青海省', 'value': 2720},
            {'name': '澳门特别行政区', 'value': 1834}]
        }],
      })
    },
    drawTree() {
      let myChart = this.$echarts.init(document.getElementById('treeChart'), 'purple')
      myChart.setOption({
        // title: {
        //   text: '房源特点',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            roam: false,
            nodeClick: false,
            type: 'treemap',
            data: [
              {
                name: '0-14',
                value: 20
              },
              {
                name: '14-24',
                value: 66
              },
              {
                name: '24-35',
                value: 45
              },
              {
                name: '35-50',
                value: 36
              },
              {
                name: '50-65',
                value: 24
              },
              {
                name: '65以上',
                value: 14
              }
            ]
          }
        ]
      })
    },
    drawBar() {
      let myChart = this.$echarts.init(document.getElementById('barChart'), this.theme)
      myChart.setOption({
        // title: {text: '太阳系八大行星的卫星数量'},
        tooltip: {},
        legend: {},
        xAxis: {
          data: ["口罩", "疫苗", "抗疫", "大白", "健康码", "自我隔离"]
        },
        yAxis: {},
        series: [{
          name: '疫情中',
          type: 'bar',
          data: [87238, 42217, 56391, 72088, 48535, 43114]
        },
          {
            name: '疫情放开',
            type: 'bar',
            data: [26122, 13191, 24168, 9976, 25813, 19379]
          }]
      });
    },
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById('lineChart'), "chalk")
      myChart.setOption({
        // title: {text: 'xxxxx'},
        xAxis: {
          type: 'category',
          data: ['奥密克戎', '贝塔', '伽马', '德尔塔']
        },
        legend: {},
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            name: '疫情中',
            data: [77995, 51002, 32403, 61275],
            type: 'line',
            smooth: true
          },
          {
            name: '疫情放开',
            data: [26739, 11406, 17061, 13476],
            type: 'bar',
            smooth: true
          }
        ]
      })
    },
    wordCloud() {
      let myChart = this.$echarts.init(document.getElementById('wordChart'))
      myChart.setOption({
        backgroundColor: 'rgba(41,52,65,0.88)',
        tooltip: {},
        series: [
          {
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 10,
            // //用来调整字的大小范围
            sizeRange: [30, 120],
            // //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            // rotationRange: [-90, 90],
            // rotationRange: [ 0,90],
            rotationRange: [20, -5],
            //随机生成字体颜色
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              // Color can be a callback function or a color string
              color: function () {
                // Random color
                return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(",") +
                    ")"
                );
              },
            },
            emphasis: {
              focus: "self",

              textStyle: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            //位置相关设置
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "100%",
            height: "100%",
            //数据
            data: [{'name': '疫苗', 'value': 255668},
              {'name': '新冠', 'value': 183452},
              {'name': '接种', 'value': 152451},
              {'name': '疫情', 'value': 101046},
              {'name': '防控', 'value': 58304},
              {'name': '病毒', 'value': 57395},
              {'name': '核酸', 'value': 55872},
              {'name': '检测', 'value': 54911},
              {'name': '人员', 'value': 47591},
              {'name': '中国', 'value': 41321},
              {'name': '工作', 'value': 39135},
              {'name': '肺炎', 'value': 37759},
              {'name': '病例', 'value': 32418},
              {'name': '健康', 'value': 31914},
              {'name': '美国', 'value': 27510},
              {'name': '采样', 'value': 25349},
              {'name': '视频', 'value': 24426},
              {'name': '做好', 'value': 22068},
              {'name': '国家', 'value': 21819},
              {'name': '确诊', 'value': 21108},
              {'name': '口罩', 'value': 21042},
              {'name': '措施', 'value': 21036},
              {'name': '时间', 'value': 20921},
              {'name': '社区', 'value': 20873},
              {'name': '隔离', 'value': 20122},
              {'name': '人群', 'value': 18764},
              {'name': '全球', 'value': 18017},
              {'name': '感染', 'value': 17577},
              {'name': '微博', 'value': 17294},
              {'name': '感染者', 'value': 16465},
              {'name': '相关', 'value': 16457},
              {'name': '风险', 'value': 15990},
              {'name': '年月日', 'value': 15966},
              {'name': '情况', 'value': 15881},
              {'name': '研发', 'value': 15633},
              {'name': '配合', 'value': 15266},
              {'name': '地区', 'value': 15131},
              {'name': '新增', 'value': 14949},
              {'name': '主动', 'value': 14771},
              {'name': '链接', 'value': 14668},
              {'name': '防护', 'value': 14281},
              {'name': '活动', 'value': 13827},
              {'name': '市民', 'value': 13818},
              {'name': '免疫', 'value': 13753},
              {'name': '落实', 'value': 13624},
              {'name': '报告', 'value': 13538},
              {'name': '居民', 'value': 13032},
              {'name': '新闻', 'value': 12763},
              {'name': '研究', 'value': 12358},
              {'name': '第一', 'value': 12281},
              {'name': '指挥部', 'value': 12149},
              {'name': '网页', 'value': 12147},
              {'name': '发布', 'value': 12062},
              {'name': '公司', 'value': 12032},
              {'name': '无症状', 'value': 11356},
              {'name': '小时', 'value': 11351},
              {'name': '发现', 'value': 11330},
              {'name': '前往', 'value': 11099},
              {'name': '单位', 'value': 10996},
              {'name': '组织', 'value': 10935},
              {'name': '一个', 'value': 10866},
              {'name': '生物', 'value': 10852},
              {'name': '提供', 'value': 10846},
              {'name': '阳性', 'value': 10797},
              {'name': '发热', 'value': 10729},
              {'name': '信息', 'value': 10513},
              {'name': '死亡', 'value': 10340},
              {'name': '临床试验', 'value': 10265},
              {'name': '聚集', 'value': 10232},
              {'name': '全程', 'value': 10113},
              {'name': '佩戴', 'value': 10065},
              {'name': '疾控中心', 'value': 10041},
              {'name': '防疫', 'value': 9920},
              {'name': '参加', 'value': 9807},
              {'name': '传播', 'value': 9491},
              {'name': '累计', 'value': 9482},
              {'name': '北京', 'value': 9368},
              {'name': '症状', 'value': 9361},
              {'name': '医院', 'value': 9312},
              {'name': '预防', 'value': 9240},
              {'name': '疾病', 'value': 9184},
              {'name': '我国', 'value': 9097},
              {'name': '街道', 'value': 9040},
              {'name': '乘坐', 'value': 8929},
              {'name': '阴性', 'value': 8893},
              {'name': '关注', 'value': 8874},
              {'name': '生产', 'value': 8787},
              {'name': '轨迹', 'value': 8767},
              {'name': '报备', 'value': 8744},
              {'name': '活疫苗', 'value': 8680},
              {'name': '老年人', 'value': 8655},
              {'name': '国际', 'value': 8629},
              {'name': '发展', 'value': 8498},
              {'name': '安排', 'value': 8419},
              {'name': '外出', 'value': 8403},
              {'name': '期间', 'value': 8353},
              {'name': '重点', 'value': 8330},
              {'name': '管控', 'value': 8323},
              {'name': '证明', 'value': 8241},
              {'name': '变异', 'value': 8232}],
          },
        ],
      })
    },
    drawBig() {
      let myChart = this.$echarts.init(document.getElementById('bigChart'), 'west')
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        // title: {
        //   left: 'center',
        //   text: 'Large Area Chart'
        // },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2020-01',
            '2020-02',
            '2020-03',
            '2020-04',
            '2020-05',
            '2020-06',
            '2020-07',
            '2020-08',
            '2020-09',
            '2020-10',
            '2020-11',
            '2020-12',
            '2021-01',
            '2021-02',
            '2021-03',
            '2021-04',
            '2021-05',
            '2021-06',
            '2021-07',
            '2021-08',
            '2021-09',
            '2021-10',
            '2021-11',
            '2021-12',
            '2022-01',
            '2022-02',
            '2022-03',
            '2022-04',
            '2022-05',
            '2022-06',
            '2022-07',
            '2022-08',
            '2022-09',
            '2022-10',
            '2022-11',
            '2022-12',
            '2023-01',
            '2023-02']
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            smooth: false,
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: [123252,
              279398,
              452397,
              673357,
              701893,
              192951,
              276477,
              262864,
              145911,
              198729,
              266377,
              130446,
              617436,
              715830,
              749753,
              140927,
              247835,
              233612,
              182812,
              152604,
              267972,
              207886,
              204660,
              254489,
              750063,
              815411,
              873374,
              653100,
              187667,
              212786,
              169918,
              147508,
              161256,
              219743,
              488436,
              824224,
              631256,
              208031]
          }
        ]
      })
    },
    drawBubble() {
      const data = [
        [
          [28604, 77 - 36, 17096869, 'Australia', '女'],
          [31163, 77.4 - 36, 27662440, 'Canada', '女'],
          [29476, 68 - 36 - 10, 1154605773, 'China', '女'],
          [13670, 74.7 - 36, 10582082, 'Cuba', '女'],
          [28599, 75 - 36, 4986705, 'Finland', '女'],
          [29476, 77.1 - 36, 56943299, 'France', '女'],
          [31476, 75.4 - 36, 78958237, 'Germany', '女'],
          [28666, 78.1 - 36, 254830, 'Iceland', '女'],
          [4777, 57.7 - 36, 870601776, 'India', '女'],
          [29550, 79.1 - 36, 122249285, 'Japan', '女'],
          [2076, 67.9 - 36, 20194354, 'North Korea', '女'],
          [12087, 72 - 36, 42972254, 'South Korea', '女'],
          [24021, 75.4 - 36, 3397534, 'New Zealand', '女'],
          [43296, 76.8 - 36, 4240375, 'Norway', '女'],
          [10088, 70.8 - 36, 38195258, 'Poland', '女'],
          [19349, 69.6 - 36 - 10, 1447568552, 'Russia', '女'],
          [10670, 67.3 - 36, 533994605, 'Turkey', '女'],
          [66424, 75.7 - 36, 57110117, 'United Kingdom', '女'],
          [47062, 75.4 - 36, 252847810, 'United States', '女']
        ],
        [
          [44056, 81.8 - 36, 23968973, 'Australia', '男'],
          [43294, 81.7 - 36, 35939927, 'Canada', '男'],
          [13334, 23, 1376048943, 'China', '男'],
          [21291, 78.5 - 36, 11389562, 'Cuba', '男'],
          [38923, 80.8 - 36, 5503457, 'Finland', '男'],
          [37599, 81.9 - 36, 64395345, 'France', '男'],
          [44053, 81.1 - 36, 80688545, 'Germany', '男'],
          [42182, 82.8 - 36, 329425, 'Iceland', '男'],
          [5903, 66.8 - 36, 1311050527, 'India', '男'],
          [36162, 83.5 - 36, 126573481, 'Japan', '男'],
          [1390, 71.4 - 36, 25155317, 'North Korea', '男'],
          [34644, 80.7 - 36, 50293439, 'South Korea', '男'],
          [34186, 80.6 - 36, 4528526, 'New Zealand', '男'],
          [64304, 81.6 - 36, 5210967, 'Norway', '男'],
          [24787, 77.3 - 36, 38611794, 'Poland', '男'],
          [23038, 73.13 - 36, 143456918, 'Russia', '男'],
          [19360, 76.5 - 36, 78665830, 'Turkey', '男'],
          [38225, 81.4 - 36, 64715810, 'United Kingdom', '男'],
          [53354, 79.1 - 36, 321773631, 'United States', '男']
        ]
      ];
      let myChart = this.$echarts.init(document.getElementById('bubbleChart'), 'west')
      myChart.setOption({
        title: {
          text: '基于用户性别的用户粉丝数与年龄的关系',
          left: '5%',
          top: '3%'
        },
        legend: {
          right: '10%',
          top: '3%',
          data: ['女', '男']
        },
        grid: {
          left: '8%',
          top: '10%'
        },
        xAxis: {
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          scale: true
        },
        series: [
          {
            name: '女',
            data: data[0],
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(120, 36, 50, 0.5)',
              shadowOffsetY: 5,
              color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: 'rgb(251, 118, 123)'
                },
                {
                  offset: 1,
                  color: 'rgb(204, 46, 72)'
                }
              ])
            }
          },
          {
            name: '男',
            data: data[1],
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(25, 100, 150, 0.5)',
              shadowOffsetY: 5,
              color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: 'rgb(129, 227, 238)'
                },
                {
                  offset: 1,
                  color: 'rgb(25, 183, 207)'
                }
              ])
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.el-col {
  margin-bottom: 1vh;
}

h2 {
  margin-left: 1vw;
  color: white;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-right: 2vw;
}

</style>